import { Component, OnInit, Input } from '@angular/core';

import { EventService , EventSource} from '../../services/event.service'

import { PaletteColor, PaletteSize } from '../../entity/PaletteColor';
import { ToolItem, ToolType } from '../../entity/ToolItem'


@Component({
  selector: 'app-palette',
  templateUrl: './palette.component.html',
  styleUrls: ['./palette.component.scss']
})
export class PaletteComponent implements OnInit {

  colors : PaletteColor[] = []

  sizes: PaletteSize[] = []

  @Input()
  toolItem : ToolItem

  _colors: string[] = [ '#000000', '#c0c0c0', '#7f7f7f', '#2a2a2a',
                        '#eb4328', '#f77702', '#f4cd02', '#9ec55a',
                        '#5bd4cf', '#2f8fdf', '#6f5d98', '#df8a87',
                      ]

  _sizes: number[] = [10, 20, 30, 40];

  selectedSize: PaletteSize;
  selectedColor: PaletteColor;

  constructor(private eventService : EventService) { }

  ngOnInit() {
    this.init()
    if(this.toolItem && this.toolItem.type == ToolType.PEN){
      this.onSelectColor(this.colors[0], true)
      this.onSelectSize(this.sizes[0], true)
    }
  }

  init (){
    this._colors.forEach(element => {
      this.colors.push({name: element, color: element, item: this.toolItem})
    });
    this.onSelectColor(this.colors[0], false)

    this._sizes.forEach(e =>{
      this.sizes.push({name: 'S'+e, size: e, width: e/8, item: this.toolItem});
    })
    this.onSelectSize(this.sizes[0], false)
  }

  onSelectColor(color:  PaletteColor, send:boolean = true): void {
    this.selectedColor = color
    if(send){
      this.eventService.sendEventMessage({
        source: EventSource.TOOL_COLOR,
        data : this.selectedColor
      });
    }

  }


  onSelectSize(size:  PaletteSize, send:boolean = true): void {
    this.selectedSize = size
    //this.log.debug('size:', size)
    if(send){

      this.eventService.sendEventMessage({
        source: EventSource.TOOL_SIZE,
        data : this.selectedSize
      });

    }


  }


}
